<!--
 * @Author: wuzhen
 * @Date: 2019-01-22 11:38:03
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-10-25 13:39:07
 * @Description: 地图组件
 -->
<template>
  <div
    id="container"
    tabindex="0"
    class="amap"
  >
    <div
      class="map-tool"
      v-if="showTool"
    >
      <div class="map-tool-item">
        <h3>绘图工具</h3>
        <RadioGroup
          v-model="vectorType"
          @on-change="radioChange"
        >
          <Radio label="Point">画点</Radio>
          <Radio label="Polyline">画线</Radio>
          <Radio label="Polygon">画多边形</Radio>
          <Radio label="Rectangle">画矩形</Radio>
          <Radio label="Circle">画圆</Radio>
        </RadioGroup>
        <!-- btn按钮 -->
        <Row>
          <Col span="12">
          <Button
            size="small"
            type="primary"
            @click="clearMap"
          >清除</Button>
          </Col>
          <Col span="12"><Button
            size="small"
            @click="onEnd"
          >绘图结束</Button></Col>
        </Row>
      </div>
      <div class="map-tool-item">
        <h3>测量工具</h3>
        <RadioGroup
          v-model="vectorType"
          @on-change="radioChange"
        >
          <Radio label="rule">距离测量</Radio>
          <Radio label="measureArea">面积测量</Radio>
        </RadioGroup>
        <!-- btn按钮 -->
        <Row>
          <Col span="12"><Button
            size="small"
            @click="clearMap"
          >关闭</Button></Col>
        </Row>
      </div>
    </div>
    <div
      id="panel"
      style="position:absolute;z-index:100"
    ></div>
    <!-- 当前坐标 -->
    <!-- <div class="currentPoint">{{currentPoint}}</div> -->
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      showTool: false,
      vectorType: '',
      currentPoint: ''
    };
  },
  mounted() {
    this._initMap();
  },
  destroyed() {
    this._destroy();
  },
  methods: {
    // 初始化地图
    _initMap() {
      this.map = new AMap.Map('container', {
        zoom: 14, // 设置地图显示的缩放级别
        viewMode: '2D', // 设置地图模式
        pitch: 45,
        lang: 'zh_cn', // 设置地图语言类型
        rotateEnable: true, // 地图是否可以旋转
        resizeEnable: true
      });
      this.map.on('click', e => {
        this.currentPoint = e.lnglat.getLng() + ',' + e.lnglat.getLat();
      });
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation', 'AMap.MouseTool', 'AMap.DistrictSearch']);
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      // this._addControl(new AMap.ToolBar());
      this._addControl(
        new AMap.ToolBar({
          // 简易缩放模式，默认为 false
          liteStyle: true
        })
      );
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      this._addControl(new AMap.Scale());
      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // this._addControl(new AMap.OverView());
      // 默认添加 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      // this._addControl(new AMap.MapType());
      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // this._addControl(new AMap.Geolocation());
      // 默认添加路网
      // this._add(new AMap.TileLayer.RoadNet());
      this.map.getCity(info => {
        //加载天气查询插件
        AMap.plugin('AMap.Weather', () => {
          //创建天气查询实例
          const weather = new AMap.Weather();
          //执行实时天气信息查询
          weather.getForecast(info.city, (err, data) => {
            this.$emit('city-info', data);
          });
        });
      });
      // 通过鼠标点击绘制覆盖物
      this.mouseTool = new AMap.MouseTool(this.map);
      this.mouseTool.on('draw', () => {
        this.$Message.success('覆盖物对象绘制完成');
      });
      // this.drawBounds();
    },
    // 获取map
    _getMap() {
      return this.map;
    },
    // 获取地图缩放级别
    _getZoom() {
      return this.map.getZoom();
    },
    // 设置地图缩放级别 level:Number
    _setZoom(level) {
      this.map.setZoom(level);
    },
    // 获取中心点坐标
    _getCenter() {
      return this.map.getCenter();
    },
    // 设置中心点坐标
    _setCenter(x, y) {
      this.map.setCenter(new AMap.LngLat(x, y));
    },
    // 同时设置地图层级与中心点 zoomLevel:Number,center:LngLat
    _setZoomAndCenter(zoomLevel, center) {
      this.map.setZoomAndCenter(zoomLevel, center);
    },
    // 添加覆盖物 overlayers:Array
    _add(overlayers) {
      this.map.add(overlayers);
    },
    // 删除覆盖物 overlayers:Array
    _remove(overlayers) {
      this.map.remove(overlayers);
    },
    // 设置地图旋转角度 rotation:Number
    _setRotation(rotation) {
      this.map.setRotation(rotation);
    },
    // 地图放大一级
    _zoomIn() {
      this.map.zoomIn();
    },
    // 地图缩小一级
    _zoomOut() {
      this.map.zoomOut();
    },
    // 地图中心点平移至指定点位置 positon:LngLat
    _panTo(positon) {
      this.map.panTo(positon);
    },
    // 删除地图上所有的覆盖物
    _clearMap() {
      this.map.clearMap();
    },
    // 注销地图对象，并清空地图容器
    _destroy() {
      this.map.destroy();
    },
    // 添加控件 参数可以是插件列表中的任何插件对象，如：ToolBar、OverView、Scale等 obj:Object
    _addControl(obj) {
      this.map.addControl(obj);
    },
    // 移除地图上的指定控件
    _removeControl(obj) {
      this.map.removeControl(obj);
    },
    // 清除地图上的信息窗体
    _clearInfoWindow() {
      this.map.clearInfoWindow();
    },
    // 创建的 Marker 指定 Icon，可以设置图标大小，偏移等属性
    _createMarker(x = 97.360985, y = 37.369436, icon, markLabel = '', data) {
      // const icon = this._createIcon(iconImg);
      const marker = new AMap.Marker({
        position: new AMap.LngLat(x, y),
        topWhenClick: true,
        offset: new AMap.Pixel(-20, -30),
        icon: icon, // 添加 Icon 实例
        zoom: 13
      });
      marker.setLabel({
        offset: new AMap.Pixel(-9, -25), //设置文本标注偏移量
        content: markLabel, //设置文本标注内容
        direction: 'top' //设置文本标注方位
      });
      this._add(marker);
      marker.on('mouseover', () => {});
      marker.on('click', () => {
        if (data) {
          this.$emit('marker-click', data);
        }
      });
    },
    // 自定义Marker的Icon图标
    _createIcon(iconImg = 'https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png', x = 19, y = 12) {
      return new AMap.Icon({
        size: new AMap.Size(x, y), // 图标尺寸
        image: iconImg, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(x, y) // 根据所设置的大小拉伸或压缩图片
      });
    },
    // 创建自定义信息窗口
    _InfoWindow(content) {
      return new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        autoMove: true, // 是否自动调整窗体到视野内
        closeWhenClickMap: true, // 控制是否在鼠标点击地图后关闭信息窗体
        content: content,
        offset: new AMap.Pixel(12, -15)
      });
    },
    // 连接点与点之间线
    _Polyline(path, strokeColor = '#34a0df') {
      const polyline = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 2,
        strokeColor: strokeColor,
        strokeOpacity: 1,
        strokeWeight: 3,
        // 折线样式还支持 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50
      });
      polyline.setMap(this.map);
      this.map.setFitView();
    },
    _placeSearch(keyWord, code) {
      let array = [];
      AMap.service(['AMap.PlaceSearch'], () => {
        var placeSearch = new AMap.PlaceSearch({
          //构造地点查询类
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: code || '420100', // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: this.map, // 展现结果的地图实例
          panel: 'panel', // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search(keyWord, (status, res) => {
          array = res.poiList.pois;
          console.log(array);
        });
      });
      this.$nextTick(() => {
        console.log(array);
        return array;
      });
    },
    // 切换vectorType
    radioChange() {
      this.draw();
    },
    draw() {
      const style = {
        strokeColor: '#3366FF',
        strokeWeight: 3,
        strokeOpacity: 1,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        strokeStyle: 'solid' // 线样式还支持 'dashed'
        // strokeDasharray: [30,10], // strokeStyle是dashed时有效
      };
      switch (this.vectorType) {
        case 'Point':
          this._drawPoint();
          break;
        case 'Polyline':
          this._drawPolyline();
          break;
        case 'Polygon':
          this._drawPolygon(style);
          break;
        case 'Rectangle':
          this._drawRectangle();
          break;
        case 'Circle':
          this._drawCircle();
          break;
        default:
          break;
      }
    },
    // 画点
    _drawPoint() {
      this.mouseTool.marker();
    },
    // 画线
    _drawPolyline() {
      this.mouseTool.polyline({
        strokeColor: '#3366FF',
        strokeOpacity: 1,
        strokeWeight: 3,
        strokeStyle: 'solid' // 线样式还支持 'dashed'
        // strokeDasharray: [10, 5] // strokeStyle是dashed时有效
      });
    },
    // 画多边形
    _drawPolygon(style) {
      this.mouseTool.polygon(style);
    },
    // 画矩形
    _drawRectangle(style) {
      this.mouseTool.rectangle(style);
    },
    // 画圆
    _drawCircle(style) {
      this.mouseTool.circle(style);
    },
    // 移除覆盖物
    clearMap() {
      this.map.clearMap();
    },
    // 结束绘图
    onEnd() {
      this.mouseTool.close(true); // 关闭，并清除覆盖物
      this.vectorType = '';
    },
    // 创建报警点
    _createAlarmPoint() {
      const position = {
        x: 114.321617,
        y: 30.581659
      };
      const marker = new AMap.Marker({
        position: new AMap.LngLat(position.x, position.y),
        offset: new AMap.Pixel(-10, -10),
        content: `<div class="dot-wrap"><div class="dot"></div><div class="pulse"></div><div class="pulse1"></div></div>`
      });
      this._add(marker);
    },

    //加载行政区划插件
    drawBounds() {
      const object3Dlayer = new AMap.Object3DLayer();
      // 设置光照
      this.map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.9);
      this.map.DirectionLight = new AMap.Lights.DirectionLight([0, -1, 1], [1, 1, 1], 0.1);
      const district = new AMap.DistrictSearch({
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: 'all', //返回行政区边界坐标组等具体信息
        level: 'district' //查询行政级别为 市
      });
      //行政区查询
      district.setLevel('district');
      district.search('武汉市', (status, result) => {
        let polygons = [];
        const bounds = result.districtList[0].boundaries;
        const height = 50000;
        const color = '#0088ffcc'; //rgba
        const prism = new AMap.Object3D.Prism({
          path: bounds,
          height: height,
          color: color
        });
        prism.transparent = true;
        object3Dlayer.add(prism); //添加
        const text = new AMap.Text({
          text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
          verticalAlign: 'bottom',
          position: [114.304515, 30.593222],
          height: 5000,
          style: {
            'background-color': 'transparent',
            '-webkit-text-stroke': 'red',
            '-webkit-text-stroke-width': '0.5px',
            'text-align': 'center',
            border: 'none',
            color: 'white',
            'font-size': '24px',
            'font-weight': 600
          }
        });
        text.setMap(this.map);
      });
      this.map.add(object3Dlayer);
    }
  }
};
</script>

<style lang="less">
.amap {
  height: 100%;
  .map-tool {
    position: absolute;
    right: 0;
    bottom: 100px;
    z-index: 100;
    background: #fff;
    width: 170px;
    padding: 15px;
    &-item {
      margin-bottom: 20px;
      h3 {
        font-size: 14px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding-bottom: 10px;
      }
      .el-radio {
        margin: 0 20px 10px 0 !important;
      }
    }
  }
  .currentPoint {
    position: absolute;
    left: 45%;
    bottom: 10px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.58);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
  }
  .amap-marker-label {
    border: none;
    background: none;
  }
  .marker-Label {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    float: left;
    position: relative;
    border: 1px solid #fff;
    box-sizing: border-box;
    font-size: 12px;
    padding: 4px 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.18);
    display: flex;
    width: 100px;
    color: #666;
    .name {
      flex: 1;
    }
    &:before,
    &:after {
      position: absolute;
      content: '';
      width: 8px;
      height: 8px;
      bottom: -4px;
      left: 20px;
      overflow: hidden;
      pointer-events: none;
      -webkit-transform: rotate(45deg);
      -mz-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    &:before {
      background: #fff;
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
    }
    &:after {
      bottom: -4px;
      background: #fff;
    }
  }
}
</style>

<style lang="less">
.amap-logo,
.amap-copyright {
  display: none !important;
}
/*地图报警*/
@keyframes warn {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0;
  }
  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn1 {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0;
  }
  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0;
  }
}

@-webkit-keyframes warn {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
.dot-wrap {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
/* 保持大小不变的小圆圈  */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
  margin-left: -14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.5);
  // border: 2px solid red;
  border-radius: 50%;
  z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈  */
.pulse,
.pulse1 {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 50%;
  left: 50%;
  margin-top: -76px;
  margin-left: -76px;
  border: 6px solid red;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  box-shadow: 1px 1px 30px red;
}
.pulse {
  background-color: rgba(255, 0, 0, 0.6);
  -webkit-animation: warn 2s ease-out infinite;
  -moz-animation: warn 2s ease-out infinite;
  animation: warn 2s ease-out infinite;
}

.pulse1 {
  -webkit-animation: warn1 2s ease-out infinite;
  -moz-animation: warn1 2s ease-out infinite;
  animation: warn1 2s ease-out infinite;
}
</style>
